<template>
  <div class="chart-wrapper">
    <div class="line-title">{{ title }}</div>
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
    </div>
  </div>
</template>

<script>
import {formatNum} from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      position: 'left',
      inverse: false,
      option: {
        grid: {
          left: '5%',
          right: '14%',
          top : '30%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          show: true,
          formatter: function(param){
            return param.name+' : '+param.value+'人'
          }
        },
        xAxis: {
          type: 'value',
          inverse: this.inverse,
          min: function(value) {
            // console.log(value);
            // if(!value.max){
            //   console.log(value.max);
            // }
            if(value.max == 0 && value.min == 0){
              return 5
            }
            return 0;
          },
          axisLine : {
            lineStyle : {
              color : '#0678c6',  
            }
          },
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: '10'
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['签收','反馈','查获'],
          position: this.position,
          axisLine : {
            show : true,
            lineStyle : {
              color : '#0678c6'
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize : '12'
            },
          },
          axisTick : {
            show:false,
          }
        },
        series: [{
          data: this.options.ldata,
          type: 'bar',
          color: '#46feff',
          barWidth: '12',
          barCategoryGap: '10%',
          label:{
            normal: {
              show: true,
              position: 'right',
              color: '#fff',
              formatter: function(v) {
                var val = v.data;
                return val+'人';
              }  
            }
          }
        }]
      }
    }
  },
  watch : {
    options: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            if(this.chartId == 'centerLine1'){
              this.option.series[0].data = newVal.ldata;
            }
            if(this.chartId == 'centerLine2'){
              this.option.series[0].data = newVal.rdata;              
            }
            this.chart.setOption(this.option);
          } else {
            this.chart.setOption(this.option);
          }
        } else {
            this.init();
        }
      },
      deep: true
    }
  },
  methods : {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    },
    changeChart() {
      if(this.chartId === 'centerLine1'){
        this.option.xAxis.inverse = false;
        this.option.yAxis.position = 'left';
        this.option.series[0].label.normal.position = 'right';
        this.option.grid.right = '5%';
      }
      if(this.chartId === 'centerLine2'){
        this.option.xAxis.inverse = true;
        this.option.yAxis.position = 'right';
        this.option.series[0].label.normal.position = 'left';
        this.option.grid.left = '5%';
        this.option.grid.right = '5%';
      }
    }
  },
  mounted(){
    this.changeChart();
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .chart-wrapper{
    position: relative;
    top: -3%;
    width: 50%;
    height: 100%;
  }
  .x-bar {
    width: 100%;
    height: 100%;
  }
  .line-title{
    position: absolute;
    top: 8%;
    width: 60%;
    height: 20px;
    line-height: 20px;
    left: 50%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background-color: #0040ff;
    transform: translateX(-50%);
  }
</style>
